<template>
  <div style="margin: 30px 100px">
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户用户名: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cUsername'></input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户名: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cName'></input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户id: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cId'> </input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户联系方式(座机): </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cTel'></input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户电话号码: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cPhoneNumber'> </input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户联系qq: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cQNumber'></input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户邮箱: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cEmail'></input></el-col>
    </el-row>
    <el-row>
      <el-col :span="6"><div class="grid-content bg-purple">客户单位: </div></el-col>
      <el-col :span="10"><input class="grid-content bg-purple-light addByShowi" v-model='client.cUnit'></input></el-col>
    </el-row>
    <el-button @click="updateInfo" type="success" plain>保存修改</el-button>

  </div>

</template>

<script>
  import Global from "../../utils/global.js"
  export default {
    name: 'ClientInfo',
    data () {
      return {
        client: [],
        glo:new Global
        //   {
        //   cName: null,
        //   cId: null,
        //   cTel: null,
        //   cPhoneNumber: null,
        //   cQNumber: null,
        //   cEmail: null,
        //   cUsername: null,
        //   cUnit: null,
        // },
      }
    },
    props: ["items"],
    methods: {
      updateInfo(){
        var vue = this
        this.glo.sendDate(this.glo.server+'client/updateInfo',this.client,(x)=>(
                  vue.$message(x.message)
        ),"POST")
        this.glo.storeData('ClientInfo',this.client);


      }
    },
    created () {
      // this.$message(this.$route.query.username);
      console.log('this');
      this.client = this.glo.getData("ClientInfo")
      console.log("this.client:"+this.client)
      // this.client.cName = this.items.cName;
      // this.client.cId = this.items.cId;
      // this.client.cTel = this.items.cTel;
      // this.client.cPhoneNumber = this.items.cPhoneNumber;
      // this.client.cQNumber = this.items.cQNumber;
      // this.client.cEmail = this.items.cEmail;
      // this.client.cUsername = this.items.cUsername;
      // this.client.cUnit = this.items.cUnit;
      // this.client.cName = this.$route.query.cName,
      // this.client.cId = this.$route.query.cId
      if(!this.client.cTel){
        this.client.cTel = '未填写'
      }
      if(!this.client.cQNumber){
        this.client.cQNumber = '未填写'
      }
      if(!this.client.cUnit){
        this.client.cUnit = '未填写'
      }
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .bg-purple {
    /*background: #d3dce6;*/
    background: #dcdac7
  }
  .bg-purple-light {
    /*background: #e5e9f2;*/
    background: #f0f0f0;
  }
  .addByShowi{
    border:0px;}
</style>
